<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top"  v-model="activeName" @tab-click="handleClick">

				<el-tab-pane label="系统设置" name="system">
					<el-form ref="systemform" :model="system" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="系统名称">
							<el-input v-model="system.system_name"></el-input>
						</el-form-item>
						<el-form-item label="LogoUrl">
							<el-input v-model="system.logo_url"></el-input>
						</el-form-item>
						<el-form-item label="初始化密码">
							<el-input v-model="system.restartPassword"></el-input>
						</el-form-item>
						<el-form-item label="资源路径">
							<el-input v-model="system.resource"></el-input>
						</el-form-item>
						<el-form-item label="app安装路径">
							<el-input v-model="system.app_path"></el-input>
						</el-form-item>
						<el-form-item label="登录开关">
							<el-switch v-model="system.is_login" active-value="1" inactive-value="0"></el-switch>
							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后普通用户无法登录，仅允许管理员角色登录</div>
						</el-form-item>
						<el-form-item label="版权信息">
							<el-input type="textarea" :autosize="{minRows: 4}" v-model="system.version"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="saveSystemConfig">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="邮件配置" name="mail">
					<el-form ref="mailform" :model="mail" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="邮箱开关">
							<el-switch v-model="mail.is_mail" active-value="1" inactive-value="0" ></el-switch>
							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后用户无法收到短信，但日志中将记录</div>
						</el-form-item>
						<el-form-item label="账号">
							<el-input v-model="mail.username"></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input v-model="mail.password"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button @click="saveMailConfig" type="primary">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="扩展配置" name="ext">
					<el-alert title="扩展配置为系统业务所有的配置，应该由系统管理员操作，如需用户配置应另起业务配置页面。" type="warning" style="margin-bottom: 15px;"></el-alert>

					<el-table :data="setting" stripe>
						<el-table-column label="#" type="index" width="50"></el-table-column>
						<el-table-column label="配置key" prop="configKey" width="150">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.configKey" placeholder="请输入内容"></el-input>
								<span v-else>{{scope.row.configKey}}</span>
							</template>
						</el-table-column>
						<el-table-column label="配置值" prop="configValue" width="150">
							<template #default="scope">
								<template v-if="scope.row.isSet">
									<el-input v-model="scope.row.configValue" placeholder="请输入内容"></el-input>
								</template>
								<span v-else>{{scope.row.configValue}}</span>
							</template>
						</el-table-column>
						
						<el-table-column label="配置名称" prop="configName" width="150">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.configName" placeholder="请输入内容"></el-input>
								<span v-else>{{scope.row.configName}}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" prop="createdate" width="150">
							<template #default="scope">
								<span>{{scope.row.createdate}}</span>
							</template>
						</el-table-column>
						<el-table-column label="更新时间" prop="updatedate" width="150">
							<template #default="scope">
								<span>{{scope.row.updatedate}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="1"></el-table-column>
						<el-table-column label="操作" fixed="right" width="120">
							<template #default="scope">
								<el-button-group>
									<el-button @click="table_edit(scope.row, scope.$index)" text type="primary" size="small">{{scope.row.isSet?'保存':"修改"}}</el-button>
									<el-button v-if="scope.row.isSet" @click="scope.row.isSet=false" text type="primary" size="small">取消</el-button>
									<el-popconfirm v-if="!scope.row.isSet" title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
										<template #reference>
											<el-button text type="primary" size="small">删除</el-button>
										</template>
									</el-popconfirm>
								</el-button-group>
							</template>
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-plus" @click="table_add" style="margin-top: 20px;"></el-button>
				</el-tab-pane>

			</el-tabs>
		</el-card>
	</el-main>
</template>

<script>
	export default {
		name: 'system',
		data() {
			return {
				activeName:"system",
				system: {},
				mail: {},
				setting: []
			}
		},
		created(){
			this.getSystemConfig();
			this.getMailConfig();
			this.getExtConfig();
		},
		methods: {
			async getSystemConfig(){
				var res = await this.$API.config.systemConfig.get();
				this.system=res.data;
			},
			//保存系统配置
			async saveSystemConfig(){
				var res = await this.$API.config.systemConfigUpdate.post(this.system);
				if(res.code==200){
					this.$message.success("操作成功")
				}else{
					this.$message.error("操作失败")
				}
				
			},
			//获取邮件配置
			async getMailConfig(){
				var res = await this.$API.config.mailConfig.get();
				this.mail=res.data;
			},
			//保存邮件配置
			async saveMailConfig(){
				var res = await this.$API.config.mailConfigUpdate.post(this.mail);
				if(res.code==200){
					this.$message.success("操作成功")
				}else{
					this.$message.error("操作失败")
				}
			},
			//获取拓展配置
			async getExtConfig(){
				var res = await this.$API.config.extConfig.get();
				this.setting=res.data;
			},
			async deleteConfig(id){
				var res = await this.$API.config.deleteConfig.post({'id':id});
			},
			table_add(){
				var newRow = {
					key: "",
					value: "",
					title: "",
					isSet: true
				}
				this.setting.push(newRow)
			},
			async table_edit(row){
				if(row.isSet){
					var res = await this.$API.config.saveorupdate.post(row);
					if(res.code==200){
						this.getExtConfig();
						this.$message.success(res.msg)
					}else{
						this.$message.error(res.msg)
					}
				}
				if(row.isSet){
					row.isSet = false
				}else{
					row.isSet = true
				}
			},
			table_del(row, index){
				this.setting.splice(index, 1)
				this.deleteConfig(row.id);
			},
			handleClick(tab, event) {
        		console.log(tab.name, event);
      		}
		}
	}
</script>

<style>
</style>
